<template>
  <el-table
    :data="userData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />

    <el-table-column label="头像" width="100" align="center">
      <template #default="scope">
        <el-avatar :size="50" :src="store.state.BaseUrl + scope.row.avatar" />
      </template>
    </el-table-column>

    <el-table-column
      prop="username"
      label="用户名"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column
      prop="email"
      label="邮箱"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column
      prop="_id"
      label="唯一标识符"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column label="创建时间" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <Timer />
          </el-icon>
          <span style="margin-left: 10px">{{
            dayjs(scope.row.createTime - 0).format('YYYY-MM-DD HH:mm')
          }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="100" align="center">
      <template #default="scope">
        <el-popconfirm
          title="确定删除吗?"
          @confirm="handleDelClick(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button
              size="small"
              circle
              :icon="Delete"
              type="danger"
            ></el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'
import dayjs from 'dayjs'
import { Timer, Delete } from '@element-plus/icons-vue'

import { delUser } from '@/utils/userManageHttp'

const store: any = inject('store')
type UserData = {
  avatar?: string
  username?: string
  email?: string
  createTime?: string
  _id?: string
}
defineProps<{
  userData: UserData[]
}>()
//  这个是选择中的数据
const multipleSelection = ref<UserData[]>([])
// 每选择一次机会给 multipleSelection数组 加一个数据
const handleSelectionChange = (val: UserData[]) => {
  multipleSelection.value = val
}

const emits = defineEmits(['getList'])
const handleDelClick = (index: number, row: UserData) => {
  delUser(row._id, row.avatar?.split('/')[1]).then((res) => {
    res.data.ok && emits('getList')
  })
}
defineExpose({ multipleSelection })
</script>

<style lang="scss" scoped></style>
